409. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2023-03-13 03:01:35 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

409.1 Files compared

#LocationFileLast Modified
1Porto v4.0.4/Porto Theme/pub/media/porto/web/cssanimate.optimized.css2017-12-09 23:30:02 +0000
2Porto v4.0.5/Porto Theme/pub/media/porto/web/cssanimate.optimized.css2023-02-02 08:36:19 +0000

409.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged83638
Changed72787
Inserted859
Removed449

409.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

409.4 Active regular expressions

No regular expressions were active.

409.5 Comparison detail

1 @charset "UTF-8"; 1 [data-appear-animation],.appear-animation {
    2     opacity: 0
    3 }
2  4 
    5 .animated,.appear-animation {
    6     animation-fill-mode: both;
    7     animation-duration: 1s
    8 }
3  9 
4 /*! 10 .appear-animation-visible {
5 Animate.css - http://daneden.me/animate 11     opacity: 1
6 Licensed under the MIT license 12 }
7  13 
8 Copyright (c) 2013 Daniel Eden 14 @keyframes flash {
    15     0%,50%,100% {
    16         opacity: 1
    17     }
    18 
    19     25%,75% {
    20         opacity: 0
    21     }
    22 }
9  23 
10 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 24 .flash {
    25     animation-name: flash
    26 }
11  27 
12 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 28 @keyframes shake {
    29     0%,100% {
    30         transform: translateX(0);
    31         opacity: 1
    32     }
13  33 
14 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 34     10%,30%,50%,70%,90% {
15 */ 35         transform: translateX(-10px)
    36     }
16  37 
17 .animated { 38     20%,40%,60%,80% {
18   -webkit-animation-duration: 1s; 39         transform: translateX(10px)
19   animation-duration: 1s; 40     }
20   -webkit-animation-fill-mode: both;    
21   animation-fill-mode: both;    
22 } 41 }
23  42 
24 .animated.hinge { 43 .shake {
25   -webkit-animation-duration: 2s; 44     animation-name: shake
26   animation-duration: 2s;    
27 } 45 }
28  46 
29 @-webkit-keyframes bounceInDown { 47 @keyframes bounce {
    48     0%,20%,50%,80%,100% {
    49         transform: translateY(0);
    50         opacity: 1
    51     }
    52 
    53     40% {
    54         transform: translateY(-30px)
    55     }
    56 
    57     60% {
    58         transform: translateY(-15px)
    59     }
    60 }
    61 
    62 .bounce {
    63     animation-name: bounce
    64 }
    65 
    66 @
keyframes tada {
30   0% { 67     0% {
31     opacity: 0; 68         transform: scale(1)
32     -webkit-transform: translateY(-2000px); 69     }
33     transform: translateY(-2000px); 70 
    71     10%,20% {
    72         transform: scale(.9) rotate(-3deg)
    73     }
    74 
    75     30%,50%,70%,90% {
    76         transform: scale(1.1) rotate(3deg)
    77     }
    78 
    79     40%,60%,80% {
    80         transform: scale(1.1) rotate(-3deg)
    81     }
    82 
    83     100% {
    84         transform: scale(1) rotate(0);
    85         opacity: 1
    86     }
    87 }
    88 
    89 .tada {
    90     animation-name: tada
    91 }
    92 
    93 @keyframes swing {
    94     20% {
    95         transform: rotate(15deg)
    96     }
    97 
    98     40% {
    99         transform: rotate(-10deg)
34   } 100     }
35  101 
36   60% { 102     60% {
37     opacity: 1; 103         transform: rotate(5deg)
38     -webkit-transform: translateY(30px);    
39     transform: translateY(30px);    
40   } 104     }
41  105 
42   80% { 106     80% {
43     -webkit-transform: translateY(-10px); 107         transform: rotate(-5deg)
44     transform: translateY(-10px);    
45   } 108     }
46  109 
47   100% { 110     100% {
48     -webkit-transform: translateY(0
);		 111         
transform: rotate(0deg);
49     transform: translateY(0); 112         opacity: 1
50   } 113     }
51 } 114 }
52  115 
53 @keyframes bounceInDown { 116 .swing {
    117     transform-origin: top center;
    118     animation-name: swing
    119 }
    120 
    121 @keyframes wobble {
54   0% { 122     0% {
55     opacity: 0; 123         transform: translateX(0%)
56     -webkit-transform: translateY(-2000px); 124     }
57     -ms-transform: translateY(-2000px); 125 
58     transform: translateY(-2000px); 126     15% {
    127         transform: translateX(-25%) rotate(-5deg)
    128     }
    129 
    130     30% {
    131         transform: translateX(20%) rotate(3deg)
    132     }
    133 
    134     45% {
    135         transform: translateX(-15%) rotate(-3deg)
59   } 136     }
60  137 
61   60% { 138     60% {
62     opacity: 1; 139         transform: translateX(10%) rotate(2deg)
63     -webkit-transform: translateY(30px); 140     }
64     -ms-transform: translateY(30px); 141 
65     transform: translateY(30px); 142     75% {
    143         transform: translateX(-5%) rotate(-1deg)
    144     }
    145 
    146     100% {
    147         transform: translateX(0%);
    148         opacity: 1
    149     }
    150 }
    151 
    152 .wobble {
    153     animation-name: wobble
    154 }
    155 
    156 @keyframes wiggle {
    157     0% {
    158         transform: skewX(9deg)
    159     }
    160 
    161     10% {
    162         transform: skewX(-8deg)
    163     }
    164 
    165     20% {
    166         transform: skewX(7deg)
    167     }
    168 
    169     30% {
    170         transform: skewX(-6deg)
    171     }
    172 
    173     40% {
    174         transform: skewX(5deg)
    175     }
    176 
    177     50% {
    178         transform: skewX(-4deg)
    179     }
    180 
    181     60% {
    182         transform: skewX(3deg)
    183     }
    184 
    185     70% {
    186         transform: skewX(-2deg)
66   } 187     }
67  188 
68   80% { 189     80% {
69     -webkit-transform: translateY(-10px); 190         transform: skewX(1deg)
70     -ms-transform: translateY(-10px); 191     }
71     transform: translateY(-10px); 192 
    193     90% {
    194         transform: skewX(0deg)
72   } 195     }
73  196 
74   100% { 197     100% {
75     -webkit-transform: translateY(0); 198         
transform: skewX(0deg);
76     -ms-transform: translateY(0
);		 199         opacity: 1
77     transform: translateY(0);    
78   } 200     }
79 } 201 }
80  202 
81 .bounceInDown { 203 .wiggle {
82   -webkit-animation-name: bounceInDown; 204     
animation-name: wiggle;
83   animation-name: bounceInDown; 205     animation-timing-function: ease-in
    206 }
    207 
    208 @keyframes pulse {
    209     0% {
    210         transform: scale(1)
    211     }
    212 
    213     50% {
    214         transform: scale(1.1)
    215     }
    216 
    217     100% {
    218         transform: scale(1);
    219         opacity: 1
    220     }
    221 }
    222 
    223 .pulse {
    224     animation-name: pulse
84 } 225 }
85  226 
86 @-webkit-keyframes bounceInLeft { 227 @keyframes fadeIn {
    228     0% {
    229         opacity: 0
    230     }
    231 
    232     100% {
    233         opacity: 1
    234     }
    235 }
    236 
    237 .fadeIn {
    238     animation-name: fadeIn
    239 }
    240 
    241 @keyframes fadeInUp {
    242     0% {
    243         opacity: 0;
    244         transform: translateY(30px)
    245     }
    246 
    247     100% {
    248         opacity: 1;
    249         transform: translateY(0)
    250     }
    251 }
    252 
    253 .fadeInUp {
    254     animation-name: fadeInUp
    255 }
    256 
    257 @keyframes fadeInDown {
    258     0% {
    259         opacity: 0;
    260         transform: translateY(-30px)
    261     }
    262 
    263     100% {
    264         opacity: 1;
    265         transform: translateY(0)
    266     }
    267 }
    268 
    269 .fadeInDown {
    270     animation-name: fadeInDown
    271 }
    272 
    273 @keyframes fadeInLeft {
    274     0% {
    275         opacity: 0;
    276         transform: translateX(-40px)
    277     }
    278 
    279     100% {
    280         opacity: 1;
    281         transform: translateX(0)
    282     }
    283 }
    284 
    285 .fadeInLeft {
    286     animation-name: fadeInLeft
    287 }
    288 
    289 @keyframes fadeInRight {
    290     0% {
    291         opacity: 0;
    292         transform: translateX(40px)
    293     }
    294 
    295     100% {
    296         opacity: 1;
    297         transform: translateX(0)
    298     }
    299 }
    300 
    301 .fadeInRight {
    302     animation-name: fadeInRight
    303 }
    304 
    305 @keyframes fadeInUpBig {
87   0% { 306     0% {
88     opacity: 0; 307         opacity: 0;
89     -webkit-transform: translateX(-2000px); 308         transform: translateY(2000px)
90     transform: translateX(-2000px); 309     }
    310 
    311     100% {
    312         opacity: 1;
    313         transform: translateY(0)
    314     }
    315 }
    316 
    317 .fadeInUpBig {
    318     animation-name: fadeInUpBig
    319 }
    320 
    321 @keyframes fadeInDownBig {
    322     0% {
    323         opacity: 0;
    324         transform: translateY(-2000px)
    325     }
    326 
    327     100% {
    328         opacity: 1;
    329         transform: translateY(0)
    330     }
    331 }
    332 
    333 .fadeInDownBig {
    334     animation-name: fadeInDownBig
    335 }
    336 
    337 @keyframes fadeInLeftBig {
    338     0% {
    339         opacity: 0;
    340         
transform: translateX(-2000px)
    341     }
    342 
    343     100% {
    344         opacity: 1;
    345         transform: translateX(0)
    346     }
    347 }
    348 
    349 .fadeInLeftBig {
    350     animation-name: fadeInLeftBig
    351 }
    352 
    353 @keyframes fadeInRightBig {
    354     0% {
    355         opacity: 0;
    356         transform: translateX(
2000px)
    357     }
    358 
    359     100% {
    360         opacity: 1;
    361         transform: translateX(0)
    362     }
    363 }
    364 
    365 .fadeInRightBig {
    366     animation-name: fadeInRightBig
    367 }
    368 
    369 @keyframes bounceIn {
    370     0% {
    371         opacity: 0;
    372         transform: scale(.3)
    373     }
    374 
    375     50% {
    376         opacity: 1;
    377         transform: scale(1.05)
    378     }
    379 
    380     70% {
    381         transform: scale(.9)
    382     }
    383 
    384     100% {
    385         transform: scale(1);
    386         opacity: 1
    387     }
    388 }
    389 
    390 .bounceIn {
    391     animation-name: bounceIn
    392 }
    393 
    394 @keyframes bounceInUp {
    395     0% {
    396         opacity: 0;
    397         transform: translateY(2000px)
91   } 398     }
92  399 
93   60% { 400     60% {
94     opacity: 1; 401         opacity: 1;
95     -webkit-transform: translateX(30px); 402         transform: translateY(-30px)
96     transform: translateX(
30px);		    
97   } 403     }
98  404 
99   80% { 405     80% {
100     -webkit-transform: translateX(-10px); 406         transform: translateY(
10px)
101     transform: translateX(-10px);    
102   } 407     }
103  408 
104   100% { 409     100% {
105     -webkit-transform: translateX(0); 410         
transform: translateY(0);
106     transform: translateX(0); 411         opacity: 1
107   } 412     }
108 } 413 }
109  414 
110 @keyframes bounceInLeft { 415 .bounceInUp {
    416     animation-name: bounceInUp
    417 }
    418 
    419 @keyframes bounceInDown {
111   0% { 420     0% {
112     opacity: 0; 421         opacity: 0;
113     -webkit-transform: translateX(-2000px); 422         transform: translateY(-2000px)
114     -ms-transform: translateX(-2000px);    
115     transform: translateX(-2000px);    
116   } 423     }
117  424 
118   60% { 425     60% {
119     opacity: 1; 426         opacity: 1;
120     -webkit-transform: translateX(30px); 427         transform: translateY(30px)
121     -ms-transform: translateX(30px);    
122     transform: translateX(30px);    
123   } 428     }
124  429 
125   80% { 430     80% {
126     -webkit-transform: translateX(-10px); 431         transform: translateY(-10px)
127     -ms-transform: translateX(-10px);    
128     transform: translateX(-10px);    
129   } 432     }
130  433 
131   100% { 434     100% {
132     -webkit-transform: translateX(0); 435         
transform: translateY(0);
133     -ms-transform: translateX(0); 436         opacity: 1
134     transform: translateX(0);    
135   } 437     }
136 } 438 }
137  439 
138 .bounceInLeft { 440 .bounceInDown {
139   -webkit-animation-name: bounceInLeft; 441     animation-name: bounceInDown
140   animation-name: bounceInLeft;    
141 } 442 }
142  443 
143 @-webkit-keyframes bounceInRight { 444 @keyframes bounceInLeft {
144   0% { 445     0% {
145     opacity: 0; 446         opacity: 0;
146     -webkit-transform: translateX(2000px); 447         transform: translateX(-2000px)
147     transform: translateX(
2000px);		    
148   } 448     }
149  449 
150   60% { 450     60% {
151     opacity: 1; 451         opacity: 1;
152     -webkit-transform: translateX(-30px); 452         transform: translateX(
30px)
153     transform: translateX(-30px);    
154   } 453     }
155  454 
156   80% { 455     80% {
157     -webkit-transform: translateX(10px); 456         transform: translateX(-10px)
158     transform: translateX(
10px);		    
159   } 457     }
160  458 
161   100% { 459     100% {
162     -webkit-transform: translateX(0);    
163     transform: translateX(0); 460         transform: translateX(0);
    461         opacity: 1
164   } 462     }
165 } 463 }
166  464 
    465 .bounceInLeft {
    466     animation-name: bounceInLeft
    467 }
    468 
167 @keyframes bounceInRight { 469 @keyframes bounceInRight {
168   0% { 470     0% {
169     opacity: 0; 471         opacity: 0;
170     -webkit-transform: translateX(2000px); 472         transform: translateX(2000px)
171     -ms-transform: translateX(2000px);    
172     transform: translateX(2000px);    
173   } 473     }
174  474 
175   60% { 475     60% {
176     opacity: 1; 476         opacity: 1;
177     -webkit-transform: translateX(-30px); 477         transform: translateX(-30px)
178     -ms-transform: translateX(-30px);    
179     transform: translateX(-30px);    
180   } 478     }
181  479 
182   80% { 480     80% {
183     -webkit-transform: translateX(10px); 481         transform: translateX(10px)
184     -ms-transform: translateX(10px);    
185     transform: translateX(10px);    
186   } 482     }
187  483 
188   100% { 484     100% {
189     -webkit-transform: translateX(0);    
190     -ms-transform: translateX(0);    
191     transform: translateX(0); 485         transform: translateX(0);
    486         opacity: 1
192   } 487     }
193 } 488 }
194  489 
195 .bounceInRight { 490 .bounceInRight {
196   -webkit-animation-name: bounceInRight; 491     animation-name: bounceInRight
197   animation-name: bounceInRight;    
198 } 492 }
199  493 
200 @-webkit-keyframes fadeIn { 494 @
keyframes rotateIn {
201   0% { 495     0% {
202     opacity: 0; 496         transform-origin: center center;
    497         transform: rotate(-200deg);
    498         opacity: 0
203   } 499     }
204  500 
205   100% { 501     100% {
206     opacity: 1; 502         transform-origin: center center;
    503         transform: rotate(0);
    504         opacity: 1
207   } 505     }
208 } 506 }
209  507 
210 @keyframes fadeIn { 508 .rotateIn {
    509     animation-name: rotateIn
    510 }
    511 
    512 @keyframes rotateInUpLeft {
211   0% { 513     0% {
212     opacity: 0; 514         transform-origin: left bottom;
    515         transform: rotate(90deg);
    516         opacity: 0
213   } 517     }
214  518 
215   100% { 519     100% {
216     opacity: 1; 520         transform-origin: left bottom;
    521         transform: rotate(0);
    522         opacity: 1
217   } 523     }
218 } 524 }
219  525 
220 .fadeIn { 526 .rotateInUpLeft {
221   -webkit-animation-name: fadeIn; 527     animation-name: rotateInUpLeft
222   animation-name: fadeIn;    
223 } 528 }
224  529 
225 @-webkit-keyframes fadeInDown { 530 @keyframes rotateInDownLeft {
    531     0% {
    532         transform-origin: left bottom;
    533         transform: rotate(-90deg);
    534         opacity: 0
    535     }
    536 
    537     100% {
    538         transform-origin: left bottom;
    539         transform: rotate(0);
    540         opacity: 1
    541     }
    542 }
    543 
    544 .rotateInDownLeft {
    545     animation-name: rotateInDownLeft
    546 }
    547 
    548 @keyframes rotateInUpRight {
    549     0% {
    550         transform-origin: right bottom;
    551         transform: rotate(-90deg);
    552         opacity: 0
    553     }
    554 
    555     100% {
    556         transform-origin: right bottom;
    557         transform: rotate(0);
    558         opacity: 1
    559     }
    560 }
    561 
    562 .rotateInUpRight {
    563     animation-name: rotateInUpRight
    564 }
    565 
    566 @keyframes rotateInDownRight {
    567     0% {
    568         transform-origin: right bottom;
    569         transform: rotate(90deg);
    570         opacity: 0
    571     }
    572 
    573     100% {
    574         transform-origin: right bottom;
    575         transform: rotate(0);
    576         opacity: 1
    577     }
    578 }
    579 
    580 .rotateInDownRight {
    581     animation-name: rotateInDownRight
    582 }
    583 
    584 @
keyframes zoomIn {
226   0% { 585     0% {
227     opacity: 0; 586         opacity: 0;
228     -webkit-transform: translateY(-20px); 587         transform: scale(.3)
229     transform: translateY(-20px); 588     }
    589 
    590     50% {
    591         opacity: 1
230   } 592     }
231  593 
232   100% { 594     100% {
233     opacity: 1; 595         opacity: 1;
234     -webkit-transform: translateY(0); 596         transform: scale(1)
235     transform: translateY(0);    
236   } 597     }
237 } 598 }
238  599 
239 @-webkit-keyframes fadeInLeft { 600 .zoomIn {
    601     animation-name: zoomIn
    602 }
    603 
    604 @keyframes slideInRight {
240   0% { 605     0% {
241     opacity: 0; 606         opacity: 1;
242     -webkit-transform: translateX(-20px); 607         transform: translateX(2000px)
243     transform: translateX(-20px);    
244   } 608     }
245  609 
246   100% { 610     100% {
247     opacity: 1; 611         opacity: 1;
248     -webkit-transform: translateX(0); 612         transform: translateX(0)
249     transform: translateX(0);    
250   } 613     }
251 } 614 }
252  615 
253 @keyframes fadeInLeft { 616 .slideInRight {
    617     animation-name: slideInRight
    618 }
    619 
    620 @keyframes slideInUp {
254   0% { 621     0% {
255     opacity: 0; 622         -webkit-transform: translate3d(0,100%,0);
256     -webkit-transform: translateX(-20px); 623         transform: translate3d(0,100%,0);
257     -ms-transform: translateX(-20px); 624         visibility: visible
258     transform: translateX(-20px); 625     }
    626 
    627     to {
    628         transform: translateZ(0)
    629     }
    630 }
    631 
    632 .slideInUp {
    633     animation-name: slideInUp
    634 }
    635 
    636 @keyframes slideOutLeft {
    637     0% {
    638         opacity: 1;
    639         transform: translateX(0)
259   } 640     }
260  641 
261   100% { 642     100% {
262     opacity: 1; 643         opacity: 1;
263     -webkit-transform: translateX(0); 644         transform: translateX(-2000px)
264     -ms-transform: translateX(0);    
265     transform: translateX(0);    
266   } 645     }
267 } 646 }
268  647 
269 .fadeInLeft { 648 .slideOutLeft {
270   -webkit-animation-name: fadeInLeft; 649     
animation-name: slideOutLeft
271   animation-name: fadeInLeft; 650 }
    651 
    652 @keyframes spin {
    653     0% {
    654         transform: rotate(0deg)
    655     }
    656 
    657     100% {
    658         transform: rotate(359deg)
    659     }
    660 }
    661 
    662 @keyframes wave {
    663     0% {
    664         transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg)
    665     }
    666 
    667     100% {
    668         transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg)
    669     }
    670 }
    671 
    672 @keyframes navItemArrow {
    673     0% {
    674         position: relative;
    675         right: -1px
    676     }
    677 
    678     50% {
    679         position: relative;
    680         right: 3px
    681     }
    682 
    683     100% {
    684         position: relative;
    685         right: -1px
    686     }
    687 }
    688 
    689 @keyframes arrowLeftRight {
    690     0% {
    691         transform: translateX(0)
    692     }
    693 
    694     50% {
    695         transform: translateX(3px)
    696     }
    697 
    698     100% {
    699         transform: translateX(0)
    700     }
272 } 701 }
273  702 
274 @-webkit-keyframes fadeInRight { 703 @keyframes slide-in {
275   0% { 704     0% {
276     opacity: 0; 705         opacity: 0;
277     -webkit-transform: translateX(20px); 706         transform: translateY(-100%)
278     transform: translateX(20px); 707     }
    708 
    709     60% {
    710         opacity: 1;
    711         transform: translateY(20%)
279   } 712     }
280  713 
281   100% { 714     100% {
282     opacity: 1; 715         opacity: 1;
283     -webkit-transform: translateX(0); 716         transform: translateY(0)
284     transform: translateX(0);    
285   } 717     }
286 } 718 }
287  719 
288 @keyframes fadeInRight { 720 @keyframes slide-out {
289   0% { 721     0% {
    722         opacity: 1;
    723         transform: translateY(0)
    724     }
    725 
    726     60% {
290     opacity: 0; 727         opacity: 0;
291     -webkit-transform: translateX(20px); 728         transform: translateY(120%)
292     -ms-transform: translateX(20px);    
293     transform: translateX(20px);    
294   } 729     }
295  730 
296   100% { 731     100% {
    732         opacity: 0;
    733         transform: translateY(100%)
    734     }
    735 }
    736 
    737 @keyframes maskUp {
    738     from {
    739         transform: translate(0,100%)
    740     }
    741 
    742     to {
    743         transform: translate(0,0)
    744     }
    745 }
    746 
    747 .maskUp {
    748     animation-name: maskUp
    749 }
    750 
    751 @keyframes sliderScrollButton {
    752     0% {
297     opacity: 1; 753         opacity: 1;
298     -webkit-transform: translateX(
0);		 754         -webkit-transform: translate3d(-50%,0,0);
299     -ms-transform: translateX(0); 755         transform: translate3d(-50%,0,0)
300     transform: translateX(0); 756     }
    757 
    758     70% {
    759         opacity: 1;
    760         -webkit-transform: translate3d(-50%,10px,0);
    761         transform: translate3d(-50%,10px,0)
    762     }
    763 
    764     100% {
    765         opacity: 0;
    766         -webkit-transform: translate3d(-50%,10px,0);
    767         transform: translate3d(-50%,10px,0)
301   } 768     }
302 } 769 }
303  770 
304 .fadeInRight { 771 @keyframes gradientTransition {
305   -webkit-animation-name: fadeInRight; 772     0% {
306   animation-name: fadeInRight; 773         background-position: 0% 50%
    774     }
    775 
    776     50% {
    777         background-position: 100% 50%
    778     }
    779 
    780     100% {
    781         background-position: 0% 50%
    782     }
    783 }
    784 
    785 @keyframes slideInLeft {
    786     0% {
    787         transform: translateX(-101%);
    788         visibility: visible
    789     }
    790 
    791     100% {
    792         transform: translateX(0)
    793     }
307 } 794 }
308  795 
    796 .slideInLeft {
    797     animation-name: slideInLeft
    798 }
    799 
    800 @keyframes topDown {
    801     0% {
    802         transform: translateY(0)
    803     }
    804 
    805     50% {
    806         transform: translateY(-5px)
    807     }
    808 
    809     100% {
    810         transform: translateY(0)
    811     }
    812 }
309 @-webkit-keyframes flip { 813 @-webkit-keyframes flip {
310   0% { 814   0% {
311     -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 815     -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
312     transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 816     transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
313     -webkit-animation-timing-function: ease-out; 817     -webkit-animation-timing-function: ease-out;
314     animation-timing-function: ease-out; 818     animation-timing-function: ease-out;
315   } 819   }
316  820 
317   40% { 821   40% {
318     -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 822     -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
319     transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 823     transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
320     -webkit-animation-timing-function: ease-out; 824     -webkit-animation-timing-function: ease-out;
321     animation-timing-function: ease-out; 825     animation-timing-function: ease-out;
322   } 826   }
323  827 
324   50% { 828   50% {
325     -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 829     -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
326     transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 830     transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
327     -webkit-animation-timing-function: ease-in; 831     -webkit-animation-timing-function: ease-in;
328     animation-timing-function: ease-in; 832     animation-timing-function: ease-in;
329   } 833   }
330  834 
331   80% { 835   80% {
332     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 836     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
333     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 837     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
334     -webkit-animation-timing-function: ease-in; 838     -webkit-animation-timing-function: ease-in;
335     animation-timing-function: ease-in; 839     animation-timing-function: ease-in;
336   } 840   }
337  841 
338   100% { 842   100% {
339     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 843     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
340     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 844     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
341     -webkit-animation-timing-function: ease-in; 845     -webkit-animation-timing-function: ease-in;
342     animation-timing-function: ease-in; 846     animation-timing-function: ease-in;
343   } 847   }
344 } 848 }
345  849 
346 @keyframes flip { 850 @keyframes flip {
347   0% { 851   0% {
348     -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 852     -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
349     -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 853     -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
350     transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 854     transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
351     -webkit-animation-timing-function: ease-out; 855     -webkit-animation-timing-function: ease-out;
352     animation-timing-function: ease-out; 856     animation-timing-function: ease-out;
353   } 857   }
354  858 
355   40% { 859   40% {
356     -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 860     -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
357     -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 861     -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
358     transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 862     transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
359     -webkit-animation-timing-function: ease-out; 863     -webkit-animation-timing-function: ease-out;
360     animation-timing-function: ease-out; 864     animation-timing-function: ease-out;
361   } 865   }
362  866 
363   50% { 867   50% {
364     -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 868     -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
365     -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 869     -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
366     transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 870     transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
367     -webkit-animation-timing-function: ease-in; 871     -webkit-animation-timing-function: ease-in;
368     animation-timing-function: ease-in; 872     animation-timing-function: ease-in;
369   } 873   }
370  874 
371   80% { 875   80% {
372     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 876     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
373     -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 877     -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
374     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 878     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
375     -webkit-animation-timing-function: ease-in; 879     -webkit-animation-timing-function: ease-in;
376     animation-timing-function: ease-in; 880     animation-timing-function: ease-in;
377   } 881   }
378  882 
379   100% { 883   100% {
380     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 884     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
381     -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 885     -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
382     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 886     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
383     -webkit-animation-timing-function: ease-in; 887     -webkit-animation-timing-function: ease-in;
384     animation-timing-function: ease-in; 888     animation-timing-function: ease-in;
385   } 889   }
386 } 890 }
387  891 
388 .animated.flip { 892 .animated.flip {
389   -webkit-backface-visibility: visible; 893   -webkit-backface-visibility: visible;
390   -ms-backface-visibility: visible; 894   -ms-backface-visibility: visible;
391   backface-visibility: visible; 895   backface-visibility: visible;
392   -webkit-animation-name: flip; 896   -webkit-animation-name: flip;
393   animation-name: flip; 897   animation-name: flip;
394 } 898 }
395  899 @
keyframes flipInX {
396 @-webkit-keyframes flipInY {    
397   0% { 900     0% {
398     -webkit-transform: perspective(400px) rotateY(
90deg);		 901         
transform: perspective(400px) rotate3d(1,0,0,90deg);
399     transform: perspective(400px) rotateY(90deg); 902         transition-timing-function: ease-in;
400     opacity: 0; 903         opacity: 0
401   } 904     }
402  905 
403   40% { 906     40% {
404     -webkit-transform: perspective(400px) rotateY(
-10deg);		 907         
transform: perspective(400px) rotate3d(1,0,0,-20deg);
405     transform: perspective(400px) rotateY(-10deg); 908         transition-timing-function: ease-in
406   } 909     }
407  910 
408   70% { 911     60% {
409     -webkit-transform: perspective(400px) rotateY(
10deg);		 912         
transform: perspective(400px) rotate3d(1,0,0,10deg);
410     transform: perspective(400px) rotateY(10deg); 913         opacity: 1
    914     }
    915 
    916     80% {
    917         transform: perspective(400px) rotate3d(1,0,0,-5deg)
411   } 918     }
412  919 
413   100% { 920     100% {
414     -webkit-transform: perspective(400px) rotateY(0deg); 921         transform: perspective(400px)
415     transform: perspective(400px) rotateY(0deg);    
416     opacity: 1;    
417   } 922     }
418 } 923 }
419  924 
    925 .flipInX {
    926     -webkit-backface-visibility: visible!important;
    927     backface-visibility: visible!important;
    928     animation-name: flipInX
    929 }
    930 
420 @keyframes flipInY { 931 @keyframes flipInY {
421   0% { 932     0% {
422     -webkit-transform: perspective(400px) rotateY(
90deg);		 933         
transform: perspective(400px) rotate3d(0,1,0,90deg);
423     -ms-transform: perspective(400px) rotateY(90deg); 934         transition-timing-function: ease-in;
424     transform: perspective(400px) rotateY(90deg); 935         opacity: 0
425     opacity: 0;    
426   } 936     }
427  937 
428   40% { 938     40% {
429     -webkit-transform: perspective(400px) rotateY(
-10deg);		 939         
transform: perspective(400px) rotate3d(0,1,0,-20deg);
430     -ms-transform: perspective(400px) rotateY(-10deg); 940         transition-timing-function: ease-in
431     transform: perspective(400px) rotateY(-10deg);    
432   } 941     }
433  942 
434   70% { 943     60% {
435     -webkit-transform: perspective(400px) rotateY(
10deg);		 944         
transform: perspective(400px) rotate3d(0,1,0,10deg);
436     -ms-transform: perspective(400px) rotateY(10deg); 945         opacity: 1
437     transform: perspective(400px) rotateY(10deg); 946     }
    947 
    948     80% {
    949         transform: perspective(400px) rotate3d(0,1,0,-5deg)
438   } 950     }
439  951 
440   100% { 952     100% {
441     -webkit-transform: perspective(400px) rotateY(0deg); 953         transform: perspective(400px)
442     -ms-transform: perspective(400px) rotateY(0deg);    
443     transform: perspective(400px) rotateY(0deg);    
444     opacity: 1;    
445   } 954     }
446 } 955 }
447  956 
448 .flipInY { 957 .flipInY {
449   -webkit-backface-visibility: visible !important; 958     -webkit-backface-visibility: visible
!important;
450   -ms-backface-visibility: visible !important; 959     backface-visibility: visible
!important;
451   backface-visibility: visible !important; 960     animation-name: flipInY
452   -webkit-animation-name: flipInY;    
453   animation-name: flipInY;    
454 } 961 }
455     
456 @keyframes lightSpeedIn { 962 @keyframes lightSpeedIn {
457   0% { 963   0% {
458     -webkit-transform: translateX(100%) skewX(-30deg); 964     -webkit-transform: translateX(100%) skewX(-30deg);
459     -ms-transform: translateX(100%) skewX(-30deg); 965     -ms-transform: translateX(100%) skewX(-30deg);
460     transform: translateX(100%) skewX(-30deg); 966     transform: translateX(100%) skewX(-30deg);
461     opacity: 0; 967     opacity: 0;
462   } 968   }
463  969 
464   60% { 970   60% {
465     -webkit-transform: translateX(-20%) skewX(30deg); 971     -webkit-transform: translateX(-20%) skewX(30deg);
466     -ms-transform: translateX(-20%) skewX(30deg); 972     -ms-transform: translateX(-20%) skewX(30deg);
467     transform: translateX(-20%) skewX(30deg); 973     transform: translateX(-20%) skewX(30deg);
468     opacity: 1; 974     opacity: 1;
469   } 975   }
470  976 
471   80% { 977   80% {
472     -webkit-transform: translateX(0%) skewX(-15deg); 978     -webkit-transform: translateX(0%) skewX(-15deg);
473     -ms-transform: translateX(0%) skewX(-15deg); 979     -ms-transform: translateX(0%) skewX(-15deg);
474     transform: translateX(0%) skewX(-15deg); 980     transform: translateX(0%) skewX(-15deg);
475     opacity: 1; 981     opacity: 1;
476   } 982   }
477  983 
478   100% { 984   100% {
479     -webkit-transform: translateX(0%) skewX(0deg); 985     -webkit-transform: translateX(0%) skewX(0deg);
480     -ms-transform: translateX(0%) skewX(0deg); 986     -ms-transform: translateX(0%) skewX(0deg);
481     transform: translateX(0%) skewX(0deg); 987     transform: translateX(0%) skewX(0deg);
482     opacity: 1; 988     opacity: 1;
483   } 989   }
484 } 990 }
485  991 
486 .lightSpeedIn { 992 .lightSpeedIn {
487   -webkit-animation-name: lightSpeedIn; 993   -webkit-animation-name: lightSpeedIn;
488   animation-name: lightSpeedIn; 994   animation-name: lightSpeedIn;
489   -webkit-animation-timing-function: ease-out; 995   -webkit-animation-timing-function: ease-out;
490   animation-timing-function: ease-out; 996   animation-timing-function: ease-out;
491 } 997 }
492     
493 @-webkit-keyframes rotateIn {    
494   0% {    
495     -webkit-transform-origin: center center;    
496     transform-origin: center center;    
497     -webkit-transform: rotate(-200deg);    
498     transform: rotate(-200deg);    
499     opacity: 0;    
500   }    
501     
502   100% {    
503     -webkit-transform-origin: center center;    
504     transform-origin: center center;    
505     -webkit-transform: rotate(0);    
506     transform: rotate(0);    
507     opacity: 1;    
508   }    
509 }    
510     
511 @keyframes rotateIn {    
512   0% {    
513     -webkit-transform-origin: center center;    
514     -ms-transform-origin: center center;    
515     transform-origin: center center;    
516     -webkit-transform: rotate(-200deg);    
517     -ms-transform: rotate(-200deg);    
518     transform: rotate(-200deg);    
519     opacity: 0;    
520   }    
521     
522   100% {    
523     -webkit-transform-origin: center center;    
524     -ms-transform-origin: center center;    
525     transform-origin: center center;    
526     -webkit-transform: rotate(0);    
527     -ms-transform: rotate(0);    
528     transform: rotate(0);    
529     opacity: 1;    
530   }    
531 }    
532     
533 .rotateIn {    
534   -webkit-animation-name: rotateIn;    
535   animation-name: rotateIn;    
536 }    

Araxis Merge (but not the data content of this report) is Copyright © 1993–2019 Araxis Ltd (www.araxis.com). All rights reserved.